<template>
  <Modal
    v-model:visible="visible"
    :title="title"
    :ok-text="confirmText"
    :cancel-text="cancelText"
    @ok="onConfirm"
    @cancel="onCancel"
  >
    <view class="modal-body">
      <view
        class="descriptions"
        :class="{
          'step-list': type === ModalDescriptionType.Step,
          'align-center': alignment === ModalDescriptionAlign.Center,
          'align-right': alignment === ModalDescriptionAlign.Right,
        }"
      >
        <view class="description-row" v-for="(row, rowIndex) in description" :key="rowIndex">
          <view
            v-for="(content, index) in row.contents"
            :key="index"
            class="content"
            hover-class="hovering"
            :class="{ 'is-link': isLink(content) }"
            @click="onContentClick(content)"
          >
            <block v-if="isPicture(content)">
              <image mode="widthFix" :src="(content as ModalImage).image" />
            </block>
            <block v-else-if="isLink(content)">
              <text>{{ (content as ModalLink).linkText }}</text>
            </block>
            <block v-else>
              <text>{{ (content as ModalText).text }}</text>
            </block>
          </view>
        </view>
      </view>
    </view>
  </Modal>
</template>

<script setup lang="ts">
import Modal from '@/common/modal.vue'
import {
  type ModalContent,
  type ModalText,
  type ModalLink,
  type ModalDescriptionRow,
  type ModalImage,
  ModalDescriptionType,
  ModalDescriptionAlign,
  type ModalLandingLink,
} from '@/types/notice'

const props = defineProps<{
  show: boolean
  title: string
  description: ModalDescriptionRow[]
  type?: ModalDescriptionType
  alignment?: ModalDescriptionAlign
  confirmText: string
  cancelText?: string
}>()
const emit = defineEmits<{
  (e: 'update:show', show: boolean): void
  (e: 'confirm'): void
  (e: 'cancel'): void
  (e: 'close'): void
  (e: 'landing', landingPage: string): void
  (e: 'link-click', method: string): void
}>()

const visible = computed({
  get() {
    return props.show
  },
  set(show) {
    emit('update:show', show)
    !show && emit('close')
  },
})

function onConfirm() {
  emit('confirm')
  emit('close')
}
function onCancel() {
  emit('cancel')
  emit('close')
}

function isPicture(content: ModalContent) {
  return (content as ModalImage).image
}
function isLink(content: ModalContent) {
  return !!(content as ModalLink).linkText
}
function onContentClick(content: ModalContent) {
  if (!isLink(content)) return

  if ((content as ModalLandingLink).landingPage) {
    emit('landing', (content as ModalLandingLink).landingPage)
  } else {
    emit('link-click', (content as ModalLink).method)
  }
}
</script>

<style scoped lang="less">
.modal-body {
  max-height: 60vh;
  overflow: auto;
  padding: 0 8rpx;
  text-align: left;
}
.descriptions {
  font-weight: 400;
  font-size: 32rpx;
  line-height: 48rpx;
  color: rgba(var(--dark-vector), 0.8);
  &.align-center {
    text-align: center;
  }
  &.align-right {
    text-align: right;
  }
}
.step-list {
  list-style-type: decimal;
  > .description-row {
    display: list-item;
    margin-left: 40rpx;
  }
}
.content {
  display: contents;
  &.is-link {
    text-decoration: underline;
    color: var(--primary-color);
    &.hovering {
      filter: brightness(0.8);
    }
  }
  + .content {
    margin-left: 4rpx;
  }
  image {
    width: 100%;
  }
}
</style>
